<template>
	<view class="expert-page">
		<u-navbar :autoBack="true" title="发布信息" :placeholder="true" bgColor="rgba(255,255,255,0)"></u-navbar>
		<view class="info-box">
			<view class="cont-box">
				<view class="info-item">
					<view class="item-title">
						性别
					</view>
					<view class="sex">
						<view :class="item.show == true?'activity-item':''" class="sex-item"
							v-for="(item,index) in sexList" :key="index" @click="cutSex(index)">
							<image :src="item.img" mode=""></image>
							<view class="sex-text">
								{{item.text}}
							</view>
						</view>
					</view>
				</view>
				<view class="info-item" @click="openList(5)">
					<view class="item-title">
						年龄
					</view>
					<view class="info-right">
						<view class="item-text">
							<u-input readonly v-model="age" placeholder="请选择" border="none" inputAlign="right"
								maxlength="2"></u-input>
						</view>
						<u-icon name="arrow-down" color="#8B8DA0" size="20"></u-icon>
					</view>
				</view>
				<view class="info-item" @click="openList(2)">
					<view class="item-title">
						身高
					</view>
					<view class="info-right">
						<view class="item-text">
							<u-input v-model="height" placeholder="请选择" border="none" inputAlign="right"
								readonly></u-input>
						</view>
						<u-icon name="arrow-down" color="#8B8DA0" size="20"></u-icon>
					</view>
				</view>
				<view class="info-item" @click="openList(3)">
					<view class="item-title">
						体重
					</view>
					<view class="info-right">
						<view class="item-text">
							<u-input v-model="weight" placeholder="请选择" border="none" inputAlign="right"
								readonly></u-input>
						</view>
						<u-icon name="arrow-down" color="#8B8DA0" size="20"></u-icon>
					</view>
				</view>
				<!-- <view class="info-item">
					<view class="item-title">
						代理邀请码
					</view>
					<view class="info-right">
						<view class="item-text">
							<u-input v-model="code" placeholder="代理邀请码" border="none" inputAlign="right"
								readonly></u-input>
						</view>
					</view>
				</view> -->
				<view class="title">
					<view class="line"></view>
					<view>文字介绍(20字)</view>
				</view>
				<view>
					<u--textarea v-model="introduce" maxlength="20" placeholder="详细介绍自己的能力(20字)"></u--textarea>
				</view>
				<view class="agreement">
					<u-checkbox-group>
						<u-checkbox @change="handleChange" :value="checked" :checked="checked" size="16"
							active-color="#5755F2" shape="circle"></u-checkbox>
					</u-checkbox-group>
					<view class="agreement-text">
						去签订<text @click="goagreement('require_agreement')">《探店协议》</text>
					</view>
				</view>
				<view class="title">
					<view class="line"></view>
					<view>我的相册(可上传多张相片)</view>
				</view>
				<view class="upload-box">
					<u-upload :fileList="fileList1" width="179rpx" height="179rpx" @afterRead="afterRead"
						@delete="deletePic" name="1" multiple :maxCount="9" uploadIconColor="#c6cafa"></u-upload>
				</view>
				<view class="title">
					<view class="line"></view>
					<view>介绍视频</view>
				</view>
				<view class="upload-item" v-if="video==''" @click="goupvideo">
					<image src="https://m.lqvvvv.com/assets/static/my/upicon2.png" mode=""></image>
				</view>
				<video style="width: 179rpx; height: 179rpx;" :controls="false" v-if="video!=''"
					:src="'https://m.lqvvvv.com'+video"></video>
				<view style="width: 179rpx;" v-if="video!=''" @click="video = ''">
					<u-button type="primary" color="#5755F2" size="mini" text="重新上传"></u-button>
				</view>
				<view class="title">
					<view class="line"></view>
					<view>介绍语音</view>
				</view>
				<view class="my-voice" v-if="voice==''" :style="{ opacity: recording ? '0.8' : '1' }"
					@click="startVoice">
					<image src="https://m.lqvvvv.com/assets/static/my/upicon3.png" mode=""></image>
					<view class="voice-text">
						{{voiceTitle}}
					</view>
				</view>
				<view class="my-voice" v-if="voice!=''">
					<view @click="playVoice">
						<view class="voice_icon voice_icon_left " :class="[{ voice_icon_left_an:anmitionPlay }]"></view>
						<view class="voice-text">
							播放录音{{ voiceTime }}s
						</view>
					</view>
					<view style="width: 179rpx; margin: 0 auto;  margin-top: 20rpx;">
						<u-button @click="resetRecording()" type="primary" color="#5755F2" size="mini"
							text="重新录音"></u-button>
					</view>
				</view>
				<view class="btn">
					<u-button @click="goup" color="linear-gradient( 90deg, #C58AF0 0%, #6272ED 100%)" type="primary"
						text="确认修改" size="large" shape="circle"></u-button>
				</view>
			</view>
		</view>
		<!-- //语音动画 -->
		<u-overlay :show="recording" @click.stop="endVoice">
			<view class="voice_an">
				<view class="voice_an_icon">
					<view id="one" class="wave"></view>
					<view id="two" class="wave"></view>
					<view id="three" class="wave"></view>
					<view id="four" class="wave"></view>
					<view id="five" class="wave"></view>
					<view id="six" class="wave"></view>
					<view id="seven" class="wave"></view>
				</view>
				<view class="text">{{voiceIconText}}</view>
			</view>
		</u-overlay>
		<u-popup :show="showyes" bgColor="transparent" @close="yesclose" :round="10" mode="center">
			<view class="popup-yes">
				<image src="https://m.lqvvvv.com/assets/static/index/up-yes.png" mode=""></image>
				<view class="title">
					修改成功
				</view>
				<view style="margin-top: 30rpx;">
					<u-button type="primary" color="linear-gradient( 90deg, #C58AF0 0%, #6272ED 100%)" shape="circle"
						@click="yesclose">好的</u-button>
				</view>

			</view>
		</u-popup>
		<u-picker :show="show" :columns="columns" :defaultIndex="defaultIndex" @cancel="show = false"
			@confirm="confirm"></u-picker>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import permision from "@/js_sdk/wa-permission/permission.js";
	let recorderManager
	// #ifdef APP || MP-WEIXIN
	recorderManager = uni.getRecorderManager();
	// #endif
	// #ifdef H5
	recorderManager = null
	// #endif
	export default {
		data() {
			return {
				showyes: false,
				show: false,
				my_type: '',
				age: '',
				gender: 1,
				height: '',
				weight: '',
				code: '',
				voice: '',
				video: '',
				introduce: '',
				sexList: [{
						text: '男生',
						img: 'https://m.lqvvvv.com/assets/static/index/male1.png',
						show: true
					},
					{
						text: '女生',
						img: 'https://m.lqvvvv.com/assets/static/index/female0.png',
						show: false
					}
				],
				checked: true,
				columns: [
					[]
				],
				type: 1,
				defaultIndex: [0],
				info: {},
				// 1 类型  2.身高 3.体重 4.探店时间 5.年龄
				fileList1: [],
				recording: false,
				voiceIconText: "点击 停止",
				voiceTitle: '点击 录音',
				voicePath: '',
				voiceTime: 0,
				recordedChunks: [],
				voiceInterval: null,
				anmitionPlay: false,
				audioContext: null,
				stream: null,
				permissionStatus: ''
			}
		},
		onLoad() {
			this.getuserinfo()
			this.postinfo()
			// #ifdef APP|| MP-WEIXIN
			this.getmedio()
			// #endif
		},
		onHide() {
			// #ifdef H5
			// 销毁音频
			this.destroyAudioContext();
			// #endif
		},
		computed: {
			...mapState({
				city: state => state.city,
			})
		},
		methods: {
			postinfo() {
				let params = {

				}
				this.$Request({
					method: 'POST',
					url: '/api/friend/getMyInfo',
					data: params,
					ismsg: false,
				}).then(res => {
					if (res.code == 1) {
						let info = res.data
						this.sexList.map(item => {
							item.show = false
						})
						if (info.gender == 1) {
							this.sexList[0].show = true
						} else {
							this.sexList[1].show = true
						}
						this.age = info.age + '岁'
						this.height = info.height + 'cm'
						this.weight = info.weight + 'kg'
						this.code = info.agent_code
						this.introduce = info.intro
						this.fileList1 = info.photos.split(',').map(url => ({
							url: `https://m.lqvvvv.com${url}`
						}));
						this.video = info.intro_video
						this.voice = info.intro_voice
						this.voiceTime = info.voice_time
					}
				})
			},
			goagreement(name) {
				this.$navTo.togo('/pages/my/agreement/index', {
					name: name
				})
			},
			destroyAudioContext() {
				this.stream = null;
				this.audioContext = null;
				recorderManager = null;
				this.recordedChunks = []
			},
			yesclose() {
				this.showyes = false
				uni.navigateBack({
					delta: 1
				})
			},
			isWeChat() {
				const userAgent = navigator.userAgent.toLowerCase();
				return userAgent.includes('micromessenger');
			},
			async goup() {
				if (this.checked == false) {
					uni.showToast({
						title: '请仔细阅读并同意探店协议！',
						icon: 'none'
					})
					return
				}
				if (this.age == '') {
					uni.showToast({
						title: '请输入您的年龄',
						icon: 'none'
					})
					return
				}
				if (this.height == '') {
					uni.showToast({
						title: '请选择身高！',
						icon: 'none'
					})
					return
				}
				if (this.weight == '') {
					uni.showToast({
						title: '请选择体重！',
						icon: 'none'
					})
					return
				}
				// if (this.code == '') {
				// 	uni.showToast({
				// 		title: '请填写代理邀请码！',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				if (this.introduce == '') {
					uni.showToast({
						title: '请输入文字介绍！',
						icon: 'none'
					})
					return
				}
				if (this.fileList1.length < 1) {
					uni.showToast({
						title: '请上传我的相册！',
						icon: 'none'
					})
					return
				}
				if (this.video == '') {
					uni.showToast({
						title: '请上传介绍视频！',
						icon: 'none'
					})
					return
				}
				if (this.voice == '') {
					uni.showToast({
						title: '请录制介绍语音！',
						icon: 'none'
					})
					return
				}
				let params = {
					gender: this.gender,
					age: this.age.replace(/岁/g, ''),
					height: this.height.replace(/cm/g, ''),
					weight: this.weight.replace(/kg/g, ''),
					intro: this.introduce,
					intro_video: this.video,
					intro_voice: this.voice,
					agent_code: this.code,
					voice_time: this.voiceTime,
					photos: '',
					lat: '',
					lng: '',
					city: this.city
				}
				const app = this
				params.photos = this.fileList1.map(item => item.url.replace('https://m.lqvvvv.com', '')).join(',');
				// #ifdef APP
				let result = await permision.requestAndroidPermission('android.permission.ACCESS_FINE_LOCATION')
				if (result == 1) {
					uni.showLoading({
						mask: true,
						title: '提交中...'
					})
					uni.getLocation({
						success: (res) => {
							params.lat = res.latitude.toString()
							params.lng = res.longitude.toString()
							app.$Request({
								method: 'POST',
								url: '/api/friend/updateInfo',
								data: params,
								ismsg: true,
							}).then(res1 => {
								uni.hideLoading()
								if (res1.code == 1) {
									app.showyes = true
								}
							})
						}
					})
				} else if (result == 0) {
					uni.showToast({
						title: '请您授权位置权限!方便我们获取您的位置!',
						icon: 'none'
					})
				} else {
					uni.showToast({
						title: '请您打开位置权限！',
						icon: 'none'
					})
					setTimeout(() => {
						permision.gotoAppPermissionSetting()
					}, 1000)
				}
				// #endif
				// #ifdef MP-WEIXIN || H5
				uni.showLoading({
					mask: true,
					title: '提交中...'
				})
				uni.getLocation({
					success: (res) => {
						console.log(res)
						params.lat = res.latitude.toString()
						params.lng = res.longitude.toString()
						app.$Request({
							method: 'POST',
							url: '/api/friend/updateInfo',
							data: params,
							ismsg: true,
						}).then(res1 => {
							uni.hideLoading()
							if (res1.code == 1) {
								app.showyes = true
							}
						})
					},
					fail(err) {
						uni.hideLoading()
					}
				})
				// #endif
			},
			playVoice() {
				let app = this
				app.audioContext = uni.createInnerAudioContext();
				app.audioContext.src = 'https://m.lqvvvv.com' + app.voice;
				app.anmitionPlay = true
				app.audioContext.play();
				app.audioContext.onEnded(() => {
					console.log('播放结束')
					app.anmitionPlay = false
					app.audioContext.destroy();
				});
				app.audioContext.onError(() => {
					console.log('播放出错')
					app.anmitionPlay = false
					app.audioContext.destroy();
				});
			},
			//准备开始录音
			async startVoice() {
				let app = this;
				// #ifdef APP
				let result = await permision.requestAndroidPermission('android.permission.RECORD_AUDIO')
				if (result == 1) {
					app.recording = true;
					recorderManager.start();
					app.voiceInterval = setInterval(() => {
						app.voiceTime += 1; // 每秒更新一次录音时间
					}, 1000);
				} else if (result == 0) {
					uni.showToast({
						title: '请您授权麦克风权限!方便录音!',
						icon: 'none'
					})
				} else {
					uni.showToast({
						title: '请您打开麦克风权限！',
						icon: 'none'
					})
					setTimeout(() => {
						permision.gotoAppPermissionSetting()
					}, 1000)
				}
				// #endif
				// #ifdef MP-WEIXIN
				wx.getSetting({
					success(res) {
						if (!res.authSetting['scope.record']) {
						wx.authorize({
							scope: 'scope.record',
							success() {
							console.log('用户已同意授权');
							},
							fail() {
							wx.showModal({
								title: '提示',
								content: '需要获取录音权限，请点击确定进入设置页面进行授权。',
								showCancel: false,
								success(modalRes) {
								if (modalRes.confirm) {
									wx.openSetting({
									success(settingRes) {
										if (settingRes.authSetting['scope.record']) {
										console.log('用户在设置页面设置了录音权限');
										} else {
										console.log('用户在设置页面未设置录音权限');
										}
									}
									});
								}
								}
							});
							}
						});
						} else {
							console.log('已经有录音权限');
							app.recording = true;
							recorderManager.start();
							app.voiceInterval = setInterval(() => {
								app.voiceTime += 1; // 每秒更新一次录音时间
							}, 1000);
						}
					}
				});
				// #endif
				// #ifdef H5
				try {
					const stream = await navigator.mediaDevices.getUserMedia({
						audio: true
					});
					app.stream = stream;
					recorderManager = new MediaRecorder(stream);
					app.recordedChunks = [];
					recorderManager.ondataavailable = event => {
						if (event.data.size > 0) {
							app.recordedChunks.push(event.data);
						}
					};
					recorderManager.onstart = () => {
						console.log('录音开始');
						app.recording = true;
						app.voiceInterval = setInterval(() => {
							app.voiceTime += 1; // 每秒更新录音时间
						}, 1000);
					};

					recorderManager.onstop = () => {
						console.log('录音停止');
						clearInterval(app.voiceInterval);
						app.voiceInterval = null;
						app.recording = false;
						const blob = new Blob(app.recordedChunks, {
							type: 'audio/wav'
						});
						app.voicePath = URL.createObjectURL(blob);
						app.recordedChunks = [];

						// 检查录音时长
						if (app.voiceTime < 1) {
							uni.showToast({
								title: '说话时间过短！',
								icon: 'error'
							});
							app.resetRecording();
						} else if (app.voiceTime > 58) {
							uni.showToast({
								title: '说话时间请控制在60秒以内！',
								icon: 'error'
							});
							app.resetRecording();
						} else {
							app.onUpload(app.voicePath, app.voiceTime);
						}
					};

					recorderManager.onerror = (err) => {
						console.error('录音错误', err);
						uni.showToast({
							title: `录音错误: ${err.message || '未知错误'}`,
							icon: 'none'
						});
						app.resetRecording();
					};
					recorderManager.start();
				} catch (error) {
					console.error('请求麦克风权限时出错:', error);
					uni.showToast({
						title: '麦克风权限被拒绝!',
						icon: 'none'
					});
				}
				// #endif
			},
			//结束录音
			endVoice() {
				// #ifdef H5
				recorderManager.stop();
				// #endif
				// #ifdef APP || MP-WEIXIN
				recorderManager.stop();
				clearInterval(this.voiceInterval);
				this.voiceInterval = null;
				this.recording = false;
				// #endif
			},
			getmedio() {
				let app = this
				recorderManager.onStart(() => {
					console.log('录音开始');
				});
				recorderManager.onStop((res) => {
					console.log('录音停止', res);
					app.voicePath = res.tempFilePath;
					if (app.voiceTime < 1) {
						uni.showToast({
							title: '说话时间过短！',
							icon: 'error'
						});
						app.resetRecording();
					} else if (app.voiceTime > 58) {
						uni.showToast({
							title: '说话时间请控制在60秒以内！',
							icon: 'error'
						});
						app.resetRecording();
					} else {
						app.voiceInterval = null;
						app.onUpload(app.voicePath, app.voiceTime);
					}
				});

				recorderManager.onError((err) => {
					console.error('录音错误', err);
					uni.showToast({
						title: `录音错误: ${err.errMsg || '未知错误'}`,
						icon: 'none'
					});
					app.resetRecording();
				});
			},
			// 上传音频
			onUpload(filePath, duration) {
				console.log(filePath)
				// 实现上传功能
				uni.showLoading({
					title: "上传中....",
					mask: true
				})
				let app = this
				uni.uploadFile({
					url: 'https://m.lqvvvv.com/api/common/upload', // 仅为示例，非真实的接口地址
					filePath: filePath,
					name: 'file',
					header: {
						token: uni.getStorageSync("token") || '',
					},
					success: (res1) => {
						uni.hideLoading()
						let info = JSON.parse(res1.data)
						if (info.code == 1) {
							app.voice = info.data.url
						} else {
							uni.showToast({
								title: info.msg,
								icon: 'none'
							})
						}

					}
				});
			},

			// 重置录音状态
			resetRecording() {
				this.voice = '';
				this.voicePath = '';
				this.voiceInterval = '';
				this.voiceTime = 0;
				this.recordedChunks = [];
				this.recording = false;
				this.canSend = true;
			},
			goupvideo() {
				let app = this
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success: function(res) {
						console.log(res.tempFilePath)
						uni.showLoading({
							title: '上传中...',
							mask: true
						})
						uni.uploadFile({
							url: 'https://m.lqvvvv.com/api/common/upload', // 仅为示例，非真实的接口地址
							filePath: res.tempFilePath,
							name: 'file',
							header: {
								token: uni.getStorageSync("token") || '',
							},
							success: (res1) => {
								uni.hideLoading()
								let info = JSON.parse(res1.data)
								if (info.code == 1) {
									app.video = info.data.url
								} else {
									uni.showToast({
										title: info.msg,
										icon: 'none'
									})
								}
							}
						});
					}
				});
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://m.lqvvvv.com/api/common/upload',
						filePath: url,
						name: 'file',
						header: {
							token: uni.getStorageSync("token") || '',
						},
						success: (res) => {
							let info = JSON.parse(res.data)
							if (info.code == 1) {
								setTimeout(() => {
									resolve(info.data.url)
								}, 1000)
							} else {
								uni.showToast({
									title: info.msg,
									icon: 'none'
								})
							}
						}
					});
				})
			},
			close() {
				this.showPopup = false
			},
			getuserinfo() {
				this.$Request({
					method: 'POST',
					url: '/api/user/getMyInfo',
					data: {},
					ismsg: false,
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.info = res.data
					}
				})
			},
			cutSex(index) {
				this.sexList.map(item => {
					item.show = false
				})
				this.sexList[index].show = true
				if (this.sexList[index].text == '男生') {
					this.gender = 1
				} else {
					this.gender = 2
				}
			},
			handleChange() {
				this.checked = !this.checked
			},
			confirm(e) {
				console.log(e.value[0])
				if (this.type == 1) {
					this.my_type = e.value[0]
				}
				if (this.type == 2) {
					this.height = e.value[0]
				}
				if (this.type == 3) {
					this.weight = e.value[0]
				}
				if (this.type == 5) {
					this.age = e.value[0]
				}
				this.show = false

			},
			openList(num) {
				this.type = num
				this.defaultIndex = [0]
				if (num == 2) {
					// 初始化空数组
					let heightArray = [];

					// 从 150 cm 到 190 cm 生成身高数据
					for (let cm = 150; cm <= 190; cm += 1) {
						heightArray.push(`${cm}cm`);
					}

					// 更新 columns
					this.columns = [heightArray];
				}
				if (num == 3) {
					// 初始化体重数组
					let weightArray = [];

					// 从 50kg 到 70kg 生成体重数据
					for (let kg = 40; kg <= 80; kg += 1) { // 这里以 1kg 为步长生成体重数据
						weightArray.push(`${kg}kg`);
					}

					// 更新 columns
					this.columns = [weightArray];
				}
				if (num == 5) {
					// 初始化年龄数组
					let ageArray = [];

					// 从 50kg 到 70kg 生成体重数据
					for (let age = 18; age <= 50; age += 1) { // 这里以 1kg 为步长生成体重数据
						ageArray.push(`${age}岁`);
					}

					// 更新 columns
					this.columns = [ageArray];
				}
				this.show = true
			}
		}
	}
</script>

<style>
	page {
		background-color: #F7F8FC;
	}
</style>
<style lang="scss" scoped>
	.expert-page {
		min-height: 100vh;
		background: url('https://m.lqvvvv.com/assets/static/index/nav-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 800rpx;

		.voice_an {
			width: 300rpx;
			height: 300rpx;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -55%);
			background-color: rgba(41, 41, 41, 0.7);
			color: white;
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			border-radius: 10rpx;

			.text {
				padding-top: 30rpx;
			}

			@keyframes runVoice {
				0% {
					height: 10%;
				}

				20% {
					height: 50%;
				}

				50% {
					height: 100%;
				}

				80% {
					height: 50%;
				}

				100% {
					height: 0%;
				}
			}

			.wave {
				width: 6rpx;
				height: 100%;
				margin-left: 10rpx;
				border-radius: 50rpx;
				background-color: #999;
				vertical-align: middle;
				display: inline-block;
			}

			.voice_an_icon {
				width: 200rpx;
				height: 100rpx;
				line-height: 50rpx;
				margin: 50rpx 0;
			}

			.voice_an_icon #one {
				animation: runVoice 0.6s infinite 0.1s;
			}

			.voice_an_icon #two {
				animation: runVoice 0.6s infinite 0.3s;
			}

			.voice_an_icon #three {
				animation: runVoice 0.6s infinite 0.6s;
			}

			.voice_an_icon #four {
				animation: runVoice 0.6s infinite 0.1s;
			}

			.voice_an_icon #five {
				animation: runVoice 0.6s infinite 0.3s;
			}

			.voice_an_icon #six {
				animation: runVoice 0.6s infinite 0.6s;
			}

			.voice_an_icon #seven {
				animation: runVoice 0.6s infinite 0.1s;
			}
		}

		.popup-yes {
			width: 600rpx;
			padding: 30rpx;
			border-radius: 30rpx;
			background-image: linear-gradient(360deg, #FFFFFF 54%, #FFF6D6 100%);
			text-align: center;

			image {
				width: 500rpx;
				height: 220rpx;
				margin-top: -140rpx;
			}

			.mintitle {
				text-align: center;
				font-size: 26rpx;
				margin-top: 20rpx;
				color: #8B8DA0;
			}

			.title {
				font-weight: bold;
				font-size: 30rpx;
				color: #2E314A;
				margin-top: 20rpx;
				text-align: center;
			}
		}

		.popup-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 160rpx 0 0 0;
			/* 弹窗背景色 */
			border-radius: 16rpx;
			box-shadow: 0 8rpx 8rpx rgba(0, 0, 0, 0.1);
			/* 添加阴影效果 */
			width: 100%;
			background: url('https://m.lqvvvv.com/assets/static/index/my-head.png');
			background-repeat: no-repeat;
			background-size: 100% 209rpx;

			.pop-box {
				background-color: #fff;
				padding: 0 20rpx 20rpx 20rpx;
				border-bottom-left-radius: 30rpx;
				border-bottom-right-radius: 30rpx;

				/* 确保弹窗不宽 */
				.popup-title {
					font-size: 28rpx;
					font-weight: bold;
					margin-bottom: 40rpx;
				}

				.tag-list {
					width: 550rpx;
					display: flex;
					flex-wrap: wrap;
					margin-bottom: 20rpx;
					justify-content: start;

					.tag-item {
						width: 21.8%;
						border: 1rpx solid #ccc;
						border-radius: 50rpx;
						transition: background-color 0.3s, color 0.3s, border-color 0.3s;
						margin-bottom: 20rpx;
						margin-right: 10rpx;
						margin-left: 10rpx;
						text-align: center;
						padding: 10rpx 0;
						font-size: 26rpx;

						&.active {
							background-image: linear-gradient(90deg, #C58AF0 0%, #6272ED 100%);
							color: #fff;
							border-color: linear-gradient(90deg, #C58AF0 0%, #6272ED 100%);
						}
					}
				}
			}

		}


		.info-box {
			margin: 0 30rpx;
			background-image: url('https://m.lqvvvv.com/assets/static/index/my-head.png');
			background-size: 100% 260rpx;
			background-repeat: no-repeat;
			padding-top: 200rpx;

			.cont-box {
				background-color: #fff;
				padding: 30rpx;

				.info-item {
					background-color: #F7F8FC;
					padding: 30rpx;
					border-radius: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 30rpx;

					.item-title {
						font-size: 28rpx;
						color: #000000;
						font-weight: bold;
					}

					.info-right {
						display: flex;
						align-items: center;

						.item-text {
							margin-right: 20rpx;
							font-size: 24rpx;
							color: #999;
						}
					}

					.sex {
						display: flex;

						.sex-item {
							display: flex;
							align-items: center;
							background-color: #DEDEDE;
							padding: 10rpx 20rpx;
							border-radius: 30rpx;
							color: #9E9E9E;
							margin-left: 20rpx;

							image {
								width: 25rpx;
								height: 25rpx;
								margin-right: 10rpx;
							}

							.sex-text {
								font-size: 24rpx;
							}
						}

						.activity-item {
							background-color: #4983F2;
							color: #fff;
						}
					}

					.right-input {
						display: flex;
						align-items: center;

						.time-tips {
							font-size: 28rpx;
							color: #b8b8b8;
						}

						image {
							width: 32rpx;
							height: 32rpx;
						}
					}
				}

				.title {
					display: flex;
					align-items: center;
					font-size: 32rpx;
					color: #000000;
					font-weight: bold;
					padding: 20rpx 0;

					.line {
						margin-right: 20rpx;
						background: linear-gradient(270deg, #5755F2 0%, #CC7BFF 100%);
						height: 28rpx;
						width: 8rpx;
						border-radius: 5rpx;
					}
				}

				.agreement {
					display: flex;
					align-items: center;
					margin-top: 30rpx;

					.agreement-text {
						color: #000000;
						font-size: 24rpx;

						text {
							color: #5755F2;
						}
					}
				}

				.upload-box {}

				.upload-item {
					width: 179rpx;
					height: 179rpx;
					background-color: #F7F8FC;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 10rpx;
					margin: 20rpx 0;

					image {
						width: 55rpx;
						height: 53.58rpx;
					}
				}

				.my-voice {
					padding: 60rpx 0;
					text-align: center;

					image {
						width: 112rpx;
						height: 112rpx;
					}

					.voice-text {
						margin-top: 30rpx;
						color: #8B8DA0;
						font-size: 28rpx;
					}

					.voice_icon {
						height: 112rpx;
						width: 112rpx;
						margin: 0 auto;
						background-repeat: no-repeat;
						background-size: 100%;
					}


					.voice_icon_left {
						background-image: url(https://m.lqvvvv.com/assets/static/my/voice-left-3.png);
					}


					.voice_icon_left_an {
						animation: voiceAn_left 1s linear alternate infinite;
					}

					.voice_text {
						font-size: 26rpx;
					}

					@keyframes voiceAn_left {
						0% {
							background-image: url(https://m.lqvvvv.com/assets/static/my/voice-left-1.png);
						}

						50% {
							background-image: url(https://m.lqvvvv.com/assets/static/my/voice-left-2.png);
						}

						100% {
							background-image: url(https://m.lqvvvv.com/assets/static/my/voice-left-3.png);
						}
					}
				}
			}
		}
	}
</style>